JS小精靈-babel -2

首先我們先來練練手

1. 創建一個新的檔案，並開啟終端機 初始化npm

C:\Users\user\Desktop\IT鐵人賽\IT-Contest\babel測試> npm init
//小提醒:package name必須要是英文喔

2. 在跟目錄新增.babelrc檔 和 es6.js，並在es6.js新增內容

const arrowFunction = () =>{
    let a = "hellow";

    console.log(`${a} everyone`)
}

3. 由於我們要將ES6轉成ES5語法，所以要先下載babel的ES2015轉碼規則

babel-preset-es2015該軟件包以被棄用 以後以@babel/preset-env代替

//終端機輸入
$ npm install --save-dev @babel/preset-env

/.babelrc
  {
    "presets": [
      "es2015"
    ],
    "plugins": []
  }
  

4. 太棒了，現在們的babel知道如何ES6轉ES5了，我們直接下載babel-cli工具執行babel

小提醒:babel-cli現在改為 @babel/cli

//終端機輸入
$ npm install --save-dev @babel/cli

5. 然後我們將package.json做設定

  "scripts": {
    "build": "babel es6.js --out-file es5.js"
  },

6. 接下來只要npm run build 就會產生es5.js檔案了喔

"use strict";

var arrowFunction = function arrowFunction() {
    var a = "hellow";

    console.log(a + " everyone");
};

補充

1. babel-cli基本命令

# 轉碼結果輸出到標準輸出
$ babel example.js

# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 參數生成source map文件
$ babel src -d lib -s

2. babel-cli用途

• 把babel-cli安裝為devDependencies
• 在package.json中添加scripts(比如prepublish)，使用babel命令編譯文件
• npm publish

這樣既可以使用較新規範的JS語法編寫源碼，同時又能支持舊版環境。因為項目可能不太大，用不到構建工具(webpack或者rollup)，於是在發布之前用babel-cli進行處理

總結

由於現在網路有很多不同版本的教學，所以我會以舊版的解說再以最新版本的BAVEL來比對喔，然後記得要用新版的方式喔

參考文件

• babel官方(https://babeljs.io/docs/en/)
• 阮一峰 Babel-入门教程(https://www.ruanyifeng.com/blog/2016/01/babel.html)
• 小蘑菇哥哥 一口(很長的)氣了解babel (https://juejin.im/post/6844903743121522701#heading-1)